<template>
  <div :class="customBlockClass">
    <div :class="blockLineClass"></div>
    <div class="block-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomBlock',
  props: {
    type: {
      type: String,
      default: 'normal' // 默认类型为 'normal'
    }
  },
  computed: {
    customBlockClass() {
      // 根据 type 属性值动态设置背景颜色类
      return `custom-block custom-block-${this.type}`;
    },
    blockLineClass() {
      // 根据 type 属性值动态设置竖线颜色类
      return `block-line block-line-${this.type}`;
    }
  }
};
</script>

<style scoped>
.custom-block {
  padding: 10px;
  border: 1px solid #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  position: relative;
  display: flex;
}

.block-content {
  margin-top: 20px;
  padding-left: 20px;
  flex: 1;
}

.block-title {
  font-size: 20px;
  margin-bottom: 10px;
  color: #333333;
}

.block-content p {
  font-size: 16px;
  line-height: 1em;
  color: #666666;
}

/* 添加带圆角的竖线装饰 */
.block-line{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

/* 使用 type 属性来设置颜色类 */
.custom-block-danger {
  background-color: rgb(255, 246, 247);
}
.block-line-danger {
  background-color: rgb(254, 108, 111);
}

.custom-block-warning {
  background-color: rgb(253, 246, 236);
}

.block-line-warning {
  background-color: rgb(230, 162, 60);
}

.custom-block-normal {
  background-color: rgb(238, 240, 244);
}
.block-line-normal {
  background-color: rgb(221, 223, 228);
}

.custom-block-primary {
  background-color: rgb(244, 244, 245);
}

.block-line-primary {
  background-color: rgb(80, 191, 255);
}

.custom-block-success {
  background-color: rgb(240, 249, 235);
}

.block-line-success {
  background-color: rgb(103, 194, 58);
}



</style>
